
<%@ include file="/common/taglibs.jsp"%>
<!--分页查询共用的页面-->
<%@ include file="/common/common.jsp"%>
<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title></title>
	
	<script>
	
	</script>
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="stylesheet" type="text/css" href="<%=ApplicationPath%>/video/js/reset.css">
	<link rel="stylesheet" type="text/css" href="<%=ApplicationPath%>/video/js/bin.css">
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/json2.js"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/public.js"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/public1.js"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/jquery.cookie.js"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/hashtable.js"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/lang.js"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/js/swfobject.js"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/player.js?v=7805"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/videoManager.js?v=2233"></script>

	<script type="text/javascript" src="<%=jsPath%>/jquery/jquery.timers.js"></script><!--定时器-->
	<script>

		//主视频页面刷新或者关闭的时候，清除以前所有的视频请求
		function clearRequest()
		{
		    //如果是弹窗，则不应该清除用户的所有的视频请求，只有主视频页面刷新或者关闭的时候，清除请求
            var popupWindow = ${popupWindow	};
            if(popupWindow)
                return;
		   //如果刷新了页面，则此前所有的请求，都清掉
            var url = globalConfig.webPath + "/videoRequest/clear.action";
            var param = {};
            $.getJSON(url, param, function(result)
            {
                if(console)
                    console.log("清除以前的播放请求:" + (result.success ? "成功" : "失败"));
            });
		   
		}

        /**
         * 当easyui的dialog 被关闭的时候，会自动调用此方法，停止页面上所有在播放的视频
		 * 此方法当此页面是easyui的窗口弹出页面时，才会在窗口被关闭的时候被调用；
         * @returns {boolean}
         */
        function onWindowBeforeClose()
        {
            console.log("窗口被关闭，停止播放所有视频");
            doCloseAll();
            return true;
        }


        window.onbeforeunload = function (e) {
            clearRequest();
            //return (e || window.event).returnValue = '有信息未保存，确认离开？！';
        }
        window.onunload = function (e) {
		    clearRequest();
            //return (e || window.event).returnValue = '有信息未保存，确认离开？！';
        }

        /**
		 * 发送心跳，证明播放器页面没有被关闭，如果关闭了，需要停止当前页面正在播放的视频通道
         */
        function sendHeartBeat()
		{
		    var url = "<%=ApplicationPath%>/videoRequest/heartBeat.action";
		    var param = {};
		    $.getJSON(url, param, function()
			{
			});
		}

        function setVideoPanelWidth() {
               //var cw = document.documentElement.clientWidth;
                //var _width = document.documentElement.clientWidth  - 1;
			    //var cw = document.body.clientWidth;
			    var _width = document.body.clientWidth - 1;
			    var _height = document.body.clientHeight;
                //var _height = document.documentElement.clientHeight;
                //var parentIframe = parent.document.getElementById("realTimeVideoIFrame");
                //var b = body.height;
                //_height = parentIframe.height;
                if(_width <= 0)
				{
                    _width =700;
                    _height = 420;
				}
				//如果是报警窗口，则多画面工具条是隐藏的，视频的高度不会扣除掉工具条高度，而是整个窗口的高度
				var popupWindow = ${popupWindow	};
				if(popupWindow)
				{
                    $(".map_btn").hide();
                }else
                    _height -= 42;
                $("#"+flashObjId).width(_width );
                $("#"+flashObjId).height(_height);
        }


        //平台osd字幕设置，需要启用定时器，定时读取实时数据的位置信息，作为字幕显示在界面上
        function initOsdTimer()
        {
            var osdConfig = window.parent.globalConfig.vehicleOsdConfig;
            var strInterval = window.parent.refreshDataInterval+"s";

            //定时获取通道的流量信息，显示在播放器窗口的title上
            $('body').everyTime("1s", "refreshVideoDataUsageTimer",function(){
                //refreshOsdOnTime(osdConfig);//更新模式
                getVideoDataUsage();
            });

            //osd字幕显示类型如果为空，则不启用osd
            if(osdConfig.osdType == null || osdConfig.osdType.length == 0)
                return;
            $('body').everyTime(strInterval, "refreshOSDTimer",function(){
                refreshOsdOnTime(osdConfig);//更新模式
                //getVideoDataUsage();
            });
        }

        function  onSliderValueChange(newV, oldV) {
            setSoundVolume(newV);
        }

        /**
		 * 报警弹窗页面，单独播放某一报警车辆的视频
		 */
        function playAlarmVideo(vehicleId,  plateNo, simNo,channels)
		{
            if(simNo.length > 0)
            {
                $(".map_btn").hide();
                var channelId = [];
                var channelName = [];
                $.each(channels, function(i, ch)
                {
                    channelId.push(ch);
                    channelName.push(plateNo + " 通道" + ch);
                });
                var videoScreenNum = channels.length == 1 ? 1 : 4;
                window.parent.MyVideoPlayer.previewPopupVideo(vehicleId,simNo, channelId,channelName);
                doSwitchWindow(videoScreenNum,false);
            }
		}

        /*
         * 当发生报警的时候，如果是联动弹窗视频，则需要打开当前播放器页面的时候，自动播放车辆视频
         */
        function playSingleVehicle() {

            var simNo = "${simNo}";
            if(simNo.length > 0)
            {
                var vehicleId = "${vehicleId}";
                var plateNo = "${palteNo}";
                var channelId = [];
                var channelName = [];
                for(var m = 1; m <= 4; m++)
                {
                    channelId.push(m);
                    channelName.push(plateNo + " " + m);
                }
                doSwitchWindow(4);
                window.parent.MyVideoPlayer.previewPopupVideo(vehicleId,simNo, channelId,channelName);
            }
        }
        //初始化地图
        function initMap()
        {
            var mapUrl = window.parent.globalConfig.mapPath;
            if(mapUrl.indexOf('?') < 0)
                mapUrl += '?hisRoute=true';
            else
                mapUrl += '&hisRoute=true';
            $("#realDataMapFrame").attr("src", mapUrl);

        }

        function getMapHandler()
		{
		    return $("#realDataMapFrame")[0].contentWindow.OperatorObj;
		}

        $(document).ready(function () {
            initOsdTimer();
            setVideoPanelWidth();
            initMap();
            clearRequest();//清除之前的请求
			var httpUrl = "<%=ApplicationPath%>";
			var httpStartRecordUrl = "<%=ApplicationPath%>/videoResourceSearch/startRecord.action";//开始录像的请求
            var httpEndRecordUrl = "<%=ApplicationPath%>/videoResourceSearch/endRecord.action";//结束录像的请求
            var httpPicUploadUrl = "<%=ApplicationPath%>/videoCapture/upload.action";//截图上传的请求URL
            initVideoPlayer('${videoServerConfig.videoServerIp}',${videoServerConfig.rtmpPort}
				,httpUrl,${userPreference.maxVideoPreviewTime},${userPreference.maxAudioListeningTime},false,httpPicUploadUrl, httpStartRecordUrl,httpEndRecordUrl);
            var strInterval = "30s";
            $('body').everyTime(strInterval, "heartBeat",function(){
                sendHeartBeat();
            });
            $(".icon_voice").click(function() {
                if($("#volumeSlider").is(":hidden"))
                   $("#volumeSlider").show();
                else
                    $("#volumeSlider").hide();
            });

            //当发生报警的时候，如果是联动弹窗视频，则需要打开当前播放器页面的时候，自动播放车辆视频,但是需要延时播放视频，需要等待flash初始化完成
            setTimeout(playSingleVehicle, 1000);
        });
	</script>
</head>
<body  onresize="setVideoPanelWidth();">

<div class="map_btn">
		<div class="tv_box" style="display:none;float:left;">
			<span><i class="icon icon_num1"></i></span>
			<span><i class="icon icon_num2"></i></span>
			<span><i class="icon icon_num3"></i></span>
			<span><i class="icon icon_num4"></i></span>
			<span><i class="icon icon_num5"></i></span>
			<span><i class="icon icon_num6"></i></span>
			<span><i class="icon icon_num7"></i></span>
			<span><i class="icon icon_num8"></i></span>
			<span id="box_top"><i class="icon icon_top"></i></span>
			<span id="box_bottom"><i class="icon icon_bottom"></i></span>
			<span id="box_viewSize">
				<i class="icon icon_view"></i><i class="icon icon_xl"></i>
				<ul class="tc_box" style="display: none;">
					<li id="liViewFull"><a id="viewFull" href="#"><i class="icon_select"></i></a></li>
					<li id="liView4X3"><a id="view4X3" href="#"><i class="icon_select"></i></a></li>
					<li id="liView16X9"><a id="view16X9" href="#"><i class="icon_select"></i></a></li>
				</ul>
			</span>
			<span id="box_viewMode">
				<i class="icon icon_sslc"></i><i class="icon icon_xl"></i>
				<ul class="tc_box" style="display: none;">
					<li><a id="bufferShort" href="#"><i class="icon icon_gou"></i></a></li>
					<li><a id="bufferLong" href="#"><i class="icon icon_gou"></i></a></li>
				</ul>
			</span>
			<span id="box_capture">
				<i class="icon icon_phone"></i><i class="icon icon_xl"></i>
			</span>

			<span>
				<i class="icon icon_play_all"></i>
				<!-- <i class="icon icon_xl"></i> -->
			</span>
			<span id="box_stop">
				<i class="icon icon_close_show"></i><i class="icon icon_xl"></i>
				<ul class="tc_box" style="display: none;">
					<li><a id="stopAll" href="#"><i class="icon icon_gou"></i></a></li>
					<li><a id="clearAll" href="#"><i class="icon icon_gou"></i></a></li>
				</ul>
			</span>
			<span><i class="icon icon_num9"></i></span>
			<span id="box_voice"><i class="icon icon_voice"></i>			</span>
		</div>
		<div id="volumeSlider" style="display:none;float:left;margin-left:15px;margin-top:5px;">
			<input class="easyui-slider" style="width:120px" data-options="
				showTip: false,value:2,
				mode: 'h',min:0,max:10,step:1,onChange:onSliderValueChange,
				reversed: false">
		</div>
</div>
<div id="videoFlash">
</div>


</body></html>